<template>
	<div>
		<Menu
			mode="horizontal"
			theme="light"
			active-name="1"
			style="justify-content:space-around;display: flex;"
		>
			<div @click="gotoIndex">
				<Avatar shape="square" icon="ios-person" />
			</div>
			<div>
				<Input
					search
					placeholder="Enter something..."
					style="width: 500px"
				/>
			</div>

			<MenuItem> <b>Explore</b></MenuItem>

			<MenuItem> <b>Follow</b></MenuItem>
			<MenuItem> <b>How it works</b></MenuItem>

			<MenuItem>
				<b>FAQ</b>
			</MenuItem>
			<MenuItem>
				<b>Community</b>
			</MenuItem>
			<MenuItem>
				<Button shape="circle" type="primary" @click="gotoCreate"
					>Create</Button
				>
			</MenuItem>
			<MenuItem>
				<Button shape="circle" @click="gotoMyHome"
					>Connect wallet</Button
				>
			</MenuItem>
			<MenuItem>
				<Button shape="circle" icon="ios-search"></Button>
			</MenuItem>
			<!-- <MenuItem name="1">
        <Icon type="ios-paper" />
        内容管理
      </MenuItem>
      <MenuItem name="2">
        <Icon type="ios-people" />
        用户管理
      </MenuItem>
      <Submenu name="3">
        <template slot="title">
          <Icon type="ios-stats" />
          统计分析
        </template>
        <MenuGroup title="使用">
          <MenuItem name="3-1">新增和启动</MenuItem>
          <MenuItem name="3-2">活跃分析</MenuItem>
          <MenuItem name="3-3">时段分析</MenuItem>
        </MenuGroup>
        <MenuGroup title="留存">
          <MenuItem name="3-4">用户留存</MenuItem>
          <MenuItem name="3-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
      <MenuItem name="4">
        <Icon type="ios-construct" />
        综合设置
      </MenuItem> -->
		</Menu>
	</div>
</template>

<script>
export default {
	methods: {
		gotoCreate() {
			this.$router.push('/create');
		},
		gotoMyHome() {
			this.$router.push('/myhome');
		},

		gotoIndex() {
			this.$router.push('/');
		},
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
